<template>
  <div>
    <div class="lbswiperbox">
      <div class="lbigbox">
         <!-- 第一页 -->
      <div class="list">
        <div v-for="item in 14" :key="item">
          <div class="wimg">
            <img :src="`/img/yygk/pic(${item}).jpg`" alt="" />
          </div>
          <div class="wdesc">
            <p class="name">〖加〗启尔德</p>
            <p class="history">1892年创办仁济医院</p>
          </div>
        </div>
      </div>
      <!-- 第二页 -->
       <div class="list">
          <div v-for="item in 7" :key="item">
          <div class="wimg">
            <img :src="`/img/yygk/pic(${item}).jpg`" alt="" />
          </div>
          <div class="wdesc">
            <p class="name">〖加〗启尔德</p>
            <p class="history">1892年创办仁济医院</p>
          </div>
        </div>
      </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="btnbox">
      <div class="btn">
        <div class="lf"><i class="iconfont icon-jiantou_liebiaoxiangzuo_o"></i></div>
         <div class="gt"><i class="iconfont icon-jiantou_liebiaoxiangyou_o"></i></div>
      </div>
    </div>
  </div>
</template>

<script>
import  '@/assets/js/yygk-history'
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.btn{
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  &>div{
    &:hover{
      background-color: #c7a368;
    }
    i{
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 40px;
    }
    cursor: pointer;
    margin-right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #822230;
  }
}
.btnbox{
  justify-content: center;
  width: 1180px;
  margin: auto;
}
.lbigbox{
  position: relative;
  width: 2360px;
  display: flex;
}
.list {
  width:1180px;
  // background-color: red;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  > div {
    flex: 1 1 1;
    width: 155px;
    height: 360px;
    // background-color: cornflowerblue;
    background-color: #fff;
  }
}
.wdesc {
  margin: 15px 0;
}
.name,
.history {
  margin-bottom: 10px;
  font-size: 14px;
  color: #333333;
}
.wimg {
  width: 155px;
  img {
    width: 100%;
  }
}
.lbswiperbox {
  overflow: hidden;
  width: 1180px;
  // background-color: chocolate;
  margin: 50px auto 0;
}
</style>